<template>
	<div class="app-container">
		<div class="filter-container c-flex-row c-aligni-center c-justify-sb">
			<el-form class="form-container">
              <el-select clearable style="width: 180px;" v-model="listQuery.type" placeholder="类别">
                <el-option label="课程" :value="1"> </el-option>
                <el-option label="活动" :value="2"> </el-option>
    	      </el-select>
              <el-input @keyup.enter.native="handleFilter" v-model="listQuery.course" clearable placeholder="课程" style="width: 200px;"></el-input>
			  <el-date-picker style="width:180px;" :editable="false" type="date" value-format="yyyy-MM-dd" placeholder="时间（开始）" @change="timeCheck(1)" v-model="listQuery.start_time">
              </el-date-picker>
              <span style="padding: 0 10px;font-size: 12px;color: #666;">到</span>
              <el-date-picker style="width:180px;" :editable="false" type="date" value-format="yyyy-MM-dd" placeholder="时间（结束）" @change="timeCheck(2)"  v-model="listQuery.end_time">
              </el-date-picker>
              <el-button type="primary" class="search" icon="el-icon-search" @click="handleFilter">搜索</el-button>
			</el-form>
		</div>
		<div>
			<el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" v-loading="listLoading" element-loading-text="加载中..." fit highlight-current-row style="width: 100%;font-size: 12px;color:#222;font-family: PingFangSC-Regular;">
			 	<el-table-column width="100" align="center" label="类别">
			      <template slot-scope="scope">
			        <span>{{scope.row.type}}</span>
			      </template>
		      	</el-table-column>
		      	<el-table-column width="140" align="center" label="讲师">
			        <template slot-scope="scope">
			          <span>{{scope.row.lecturerName}}</span>
			        </template>
			      </el-table-column>
			    <el-table-column width="120"  align="center" label="课程">
			        <template slot-scope="scope">
			          <span>{{scope.row.name}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="340" align="center" label="消息内容">
			        <template slot-scope="scope">
			          <span>{{scope.row.content}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="150" align="center" label="推送时间">
			        <template slot-scope="scope">
                      <span>{{scope.row.pushTime}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="120" align="center" label="状态">
			        <template slot-scope="scope">
                      <span>{{scope.row.status==0?"已发送":"未发送"}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="150" align="center" label="操作">
			        <template slot-scope="scope">
                      <div>
			            <b @click="messagePush(scope.$index)">{{scope.row.status==0?"查看":"编辑"}}</b>
			            <span class="color-409">|</span>
			            <b @click="revoke(scope.$index,scope.row.status)">{{scope.row.status==0?"撤回":"取消"}}</b>
                      </div>
                    </template>
			    </el-table-column>
		   </el-table>
		   <div class="block text-c">
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.currentPage"
			      :page-sizes="[10, 20, 30, 50]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
	    <wechat-push v-if="isShowWechatPush" :courseData="courseData" @hideWechatPush="hideWechatPush"></wechat-push>
	</div>
</template>
<script>
	
import wechatPush from './components/wechatPush.vue'
export default {
  
  components: { wechatPush },
  data() {
    return {
      listLoading: false,
      tableData: [{
        type: "课程",
        lecturerName: "张三",
        name: "少儿英语",
        content: "你好你好你好你好",
        pushTime: "2017-01-02 18:00:00",
        status: 0
      }, {
        type: "课程",
        lecturerName: "李四",
        name: "少儿英语",
        content: "你好你好你好你好",
        pushTime: "2017-01-02 18:00:00",
        status: 1
      }, {
        type: "课程",
        lecturerName: "王五",
        name: "少儿英语",
        content: "你好你好你好你好",
        pushTime: "2017-01-02 18:00:00",
        status: 0
      }],
      URLAPI: process.env.BASE_API,
      listQuery: {
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        type: null,
        course: null,
        start_time: '', // 搜索的注册会员起始时间
        end_time: '', // 搜索的注册会员结束时间
        page: 1,
        limit: 10
      },
      isShowWechatPush: false
    }
  },
  created() {

  },
  methods: {
    handleFilter(){
      
    },
    hideWechatPush(msg) {
        this.isShowWechatPush = msg
      },
    messagePush(index) {
        this.isShowWechatPush = true
        this.courseData = this.tableData[index]
      },
    revoke(index,status) {
      if(status==0) {
        this.$confirm('确定撤回此条消息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
            
        }).catch(() => {
          	
        })
      }else if(status==1) {
        this.$confirm('确定取消此条消息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
            
        }).catch(() => {
          	
        })
      }
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) { // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val
      this.getList()
    },
    timeCheck(type) {
      if (this.listQuery.start_time && this.listQuery.end_time && this.listQuery.start_time > this.listQuery.end_time) {
        this.$message({
          message: '结束时间不能小于开始时间',
          type: 'error'
        })

        if (type == 1) {
          this.listQuery.start_time = null
        } else {
          this.listQuery.end_time = null
        }
      }
    }
  }
}
</script>

<style scoped>
	b:hover{
		color: #0A76A4;
	}
</style>
